<template>
  <el-dialog :visible.sync="visible" custom-class="userDialog-wrapper" :before-close="handleClose">
    <el-form :model="userform" :rules="rules" ref="userform">
      <div class="userform-content">
        <el-row style="margin-bottom: 1vh">
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" prop="name">
                <span slot="label" class="form-title">
                  用户名
                </span>
              <el-input v-model="userform.name"></el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item :label-width="formLabelWidth" prop="name">-->
<!--                <span slot="label" class="form-title">-->
<!--                  姓名-->
<!--                </span>-->
<!--              <el-input v-model="userform.name"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
        <el-row style="margin-bottom: 1vh">
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" prop="password">
                <span slot="label" class="form-title">
                  用户密码
                </span>
              <el-input v-model="userform.password" show-password></el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item :label-width="formLabelWidth" prop="pw_repeat">-->
<!--                <span slot="label" class="form-title">-->
<!--                  确认密码-->
<!--                </span>-->
<!--              <el-input v-model="userform.pw_repeat"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
        <!-- 此处以下为新增内容 -->
        <el-row style="margin-bottom: 1vh">
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" prop="pw_repeat">
                <span slot="label" class="form-title">
                  确认密码
                </span>
              <el-input v-model="userform.pw_repeat" show-password></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 新增内容结束 -->
        <el-row style="margin-bottom: 1vh">
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" prop="typename">
                <span slot="label" class="form-title">
                  职位
                </span>
<!--              <el-input v-model="userform.position"></el-input>-->
              <el-select v-model="userform.typename">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item :label-width="formLabelWidth" prop="permissionlv">-->
<!--                <span slot="label" class="form-title">-->
<!--                  职级-->
<!--                </span>-->
<!--              <el-input v-model="userform.permissionlv"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
<!--        <el-row style="margin-bottom: 1vh">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item :label-width="formLabelWidth">-->
<!--                <span slot="label" class="form-title">-->
<!--                  性别-->
<!--                </span>-->
<!--              <el-radio v-model="userform.sex" label="男">男</el-radio>-->
<!--              <el-radio v-model="userform.sex" label="女">女</el-radio>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item :label-width="formLabelWidth" prop="tele">-->
<!--                <span slot="label" class="form-title">-->
<!--                  办公电话-->
<!--                </span>-->
<!--              <el-input v-model="userform.tele"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row style="margin-bottom: 1vh">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item :label-width="formLabelWidth">-->
<!--                <span slot="label" class="form-title">-->
<!--                  联系电话-->
<!--                </span>-->
<!--              <el-input v-model="userform.cellphone"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item :label-width="formLabelWidth">-->
<!--                <span slot="label" class="form-title">-->
<!--                  邮箱-->
<!--                </span>-->
<!--              <el-input v-model="userform.email"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="24">-->
<!--            <el-form-item :label-width="formLabelWidth">-->
<!--                <span slot="label" class="form-title">-->
<!--                  备注-->
<!--                </span>-->
<!--              <el-input v-model="userform.remark" :autosize="{ minRows: 2, maxRows: 4}"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </div>
    </el-form>
    <div slot="title" style="font-size: 20px" v-if="dialogKind === 0">
      修改信息
    </div>
    <div slot="title" style="font-size: 20px" v-else>
      添加信息
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button class="el-green-button" @click="submitForm('userform')" type="primary">保存</el-button>
      <el-button class="el-red-button" @click="handleClose" type="info">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/network/request'
export default {
  name: 'currencyDialog',
  watch: {
    visibleFlag: function (newValue) {
      this.visible = newValue
    }
  },
  mounted () {
    console.log(this.userId)
    this.visible = this.visibleFlag
  },
  data () {
    return {
      formLabelWidth: '120px',
      visible: false,
      options: [{
        value: '普通用户',
        label: '普通用户'
      }, {
        value: '管理员',
        label: '管理员'
      }]
    }
  },
  props: {
    visibleFlag: { type: Boolean, required: true },
    dialogKind: { type: Number, required: true, default: 1 }, // 0:修改信息dialog；1：增加信息dialog
    userform: { type: Object, required: true },
    rules: { type: Object, required: true },
    userId: { type: String }
  },
  methods: {
    handleClose () {
      this.$emit('close-dialog')
    },
    submitForm (formName) {
      const userForm = this.userform
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.userform.password !== this.userform.pw_repeat) {
            this.$message.error('请检查两次密码是否一致!')
          } else {
            let baseurl
            switch (this.dialogKind) {
              case 0 : {
                baseurl = `/userOp/update?id=${this.userId}&`
                break
              }
              case 1 : {
                baseurl = '/userOp/add?'
                break
              }
            }
            let type = 1
            if (userForm.typename === '管理员') {
              type = 0
            }
            request({
              method: 'post',
              // url: `${baseurl}cellphone=${userForm.cellphone}&email=${userForm.email}&name=${userForm.name
              // }&permissionlv=${userForm.permissionlv}&pw=${userForm.pw}&position=${userForm.position}&pw_repeat=${userForm.pw_repeat
              // }&remark=${userForm.remark}&sex=${userForm.sex}&tele=${userForm.tele}
              // &username=${userForm.username}`
              url: `${baseurl}password=${userForm.password}&type=${type}&name=${userForm.name}&typeName=${userForm.typename}`
            }).then((res) => {
              if (res.data.code === 200 && res.data.message === 'success') {
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                })
                this.handleClose()
              } else if (res.data.message !== 'success') {
                this.$message.error(res.data.message)
              } else if (res.data.code === 400) {
                this.$message.error(res.message)
              } else {
                this.$message.error('保存失败!')
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .userform-content{
    padding: 20px;
    display: flex;
    margin-right: 50px;
    flex-direction: column;
    justify-content: center;
  }
  >>> .el-dialog__body {
    height: 32vh;
  }
</style>
